// 商品选择规格属性弹出框
<template>
  <!-- 弹出框 -->
  <u-popup
    border-radius="20"
    @open="open"
    @tap.stop
    :mask-close-able="true"
    v-model="show"
    mode="bottom"
    closeable
  >
    <view class="pop-box">
      <scroll-view scroll-y="true" :style="{ height }">
        <view class="top">
          <!-- 主图 -->
          <view class="image-box">
            <view class="left">
              <image :src="goods.goods_image" />
            </view>

            <view class="money">
              <view v-if="price !== '' && bind == 1 && priceStatus">￥{{ price }}</view>
            </view>
          </view>
        </view>
        <!-- 单位 -->
        <view class="pop1">
          <view class="pop1-top">单位</view>
          <view class="pop1-bottom">
            <view
              @tap="chooseUnit(item.decimal, item.price, item.name, item.unit)"
              :class="item.is_checked ? 'pop1-checked' : ''"
              class="pop1-item"
              v-for="item in goodsForm.unit_data"
              :key="item.unit"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <!-- 属性 -->
        <view class="pop1" v-if="goodsForm&&goodsForm.attr_data&&goodsForm.attr_data.length">
          <view class="pop1-top">属性</view>
          <view class="pop1-bottom">
            <view
              v-for="item in goodsForm.attr_data"
              :key="item.id"
              :class="item.is_checked ? 'pop1-checked' : ''"
              class="pop1-item"
              @tap="chooseAttr(item.attr_name, item.id)"
            >
              {{ item.attr_name }}
            </view>
          </view>
        </view>
        <!-- 数量 -->
        <view class="pop2">
          <view class="pop2-left">购买数量</view>
          <view class="pop2-right">
            <view @tap="numberDel" class="t-icon t-icon-a--"></view>
            <view class="pop2-number" style="text-align: center">
              <input
                type="text"
                v-model.number="form.number"
                @focus="numberInputFocus(form.number)"
                @change="numberInputChange"
              />
            </view>
            <view @tap="numberAdd" class="t-icon t-icon-a-1"></view>
          </view>
        </view>
      </scroll-view>
      <view class="pop3">
        <view @tap="popAddBill"> +加入订货单</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    value: {
      type: Boolean
    },
    goods: {
      type: Object
    },
    height: {
      type: String,
      default: '60vh'
    }
  },
  data() {
    return {
      show: false,
      goodsForm: {},
      price: '',
      form: {
        goods_id: '',

        goods_unit: '',

        goods_attr: '',

        number: 1,
        // 商品名称
        unit_name: '',
        // 属性名称
        attr_name: ''
      },
      simplePrice: '',
      bind: '',
      oldNumber: ''
    }
  },
  mounted() {
    const userInfo = uni.getStorageSync('userInfo')
    this.bind = userInfo.binding
    console.log('band is', this.bind)
  },
  methods: {
    // 监听输入框获取焦点
    numberInputFocus(number) {
      this.oldNumber = number
    },
    // 监听输入框改变
    async numberInputChange(e) {
      if (!e.detail.value || e.detail.value === '0') {
        this.form.number = this.oldNumber
      }
    },
    // 获取购物车数量
    async getCartNumber() {
      const res = await this.$http.post('/api/kuerp/order/index/getCartNumber')
      if (res.code == 200) {
        if (res.data === 0) {
          uni.removeTabBarBadge({ index: 2 })
        } else {
          uni.setTabBarBadge({
            index: 2,
            text: res.data + ''
          })
        }
      }
    },
    // 弹出框添加购货单
    async popAddBill() {
      let postForm = {
        goods_id: this.form.goods_id,
        goods_unit: this.form.goods_unit,
        goods_attr: this.form.goods_attr,
        number: this.form.number
      }
      const res = await this.$http.post('/api/kuerp/order/index/addCart', postForm)
      if (res.code == 200) {
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        })
      }
      this.$emit('confirm')
      this.getCartNumber()
      uni.$emit('refreshCategoryPage')
      setTimeout(() => {
        this.show = false
      }, 600)
    },
    // 数量加
    numberAdd() {
      this.flag = 1
      this.form.number++
      this.computePrice()
    },
    computePrice() {
      // if (this.simplePrice !== '' && this.price !== '') {
      //   this.price = (this.simplePrice * this.form.number).toFixed(2)
      //   console.log('price', this.price)
      // }
    },
    // 数量减
    numberDel() {
      if (this.form.number > 1) {
        this.form.number--
        this.computePrice()
      } else {
        return
      }
    },
    // 选择属性
    chooseAttr(name, id) {
      this.flag = 1
      const decimal = this.goodsForm.unit_data[0].decimal
      const more_unit = this.goodsForm.more_unit == 1 // 1 多单位，2 单单位

      if (more_unit) {
        this.goodsForm.attr_data.forEach((item) => {
          if (item.id == id) {
            item.is_checked = true
            this.form.attr_name = name
            this.form.goods_attr = id
          } else {
            item.is_checked = false
          }
        })
      } else {
        this.goodsForm.attr_data.forEach((item) => {
          if (item.id == id) {
            item.is_checked = true
            this.form.attr_name = name
            this.form.goods_attr = id
            this.price = item.price + '.' + item.decimal
          } else {
            item.is_checked = false
          }
        })
      }
    },
    // 选择单位
    chooseUnit(decimal, price, name, id) {
      const more_unit = this.goodsForm.more_unit == 1 // 1 多单位，2 单单位

      if (more_unit) {
        this.goodsForm.unit_data.forEach((item) => {
          if (item.unit == id) {
            item.is_checked = true
            this.price = price !== '' ? price + '.' + decimal : ''
            this.simplePrice = price !== '' ? price + '.' + decimal : ''
            this.form.unit_name = name
            this.form.goods_unit = id
            this.computePrice()
          } else {
            item.is_checked = false
          }
        })
      } else {
        this.goodsForm.attr_data.forEach((item) => {
          if (item.id == this.form.goods_attr) {
            this.price = item.price + '.' + decimal
          }
        })
      }
    },
    open() {
      this.form.number = 1
      console.log('this.goods', this.goods)
      this.getDetail(this.goods.id)
    },
    // 获取详情
    async getDetail(id) {
      this.form.goods_id = id
      const res = await this.$http.post('/api/kuerp/order/index/goodsGoodsInfo', {
        id: id
      })
      if (res.code == 200) {
        this.goodsForm = res.data
        this.price =
          this.goodsForm.unit_data[0].price !== ''
            ? this.goodsForm.unit_data[0].price + '.' + this.goodsForm.unit_data[0].decimal
            : ''
        this.simplePrice =
          this.goodsForm.unit_data[0].price !== ''
            ? this.goodsForm.unit_data[0].price + '.' + this.goodsForm.unit_data[0].decimal
            : ''

        // 赋值属性
        if (this.goodsForm.attr_data.length) {
          this.goodsForm.attr_data.forEach((item, index) => {
            if (index === 0) {
              item.is_checked = true
              this.form.goods_attr = item.id
            } else {
              item.is_checked = false
            }
          })
        }
        // 赋值单位
        if (this.goodsForm.unit_data.length) {
          // 判断是否有一个默认单位
          const hasDefault = this.goodsForm.unit_data.some((item) => item.is_default == 1)
          if (hasDefault) {
            this.goodsForm.unit_data.forEach((item) => {
              if (item.is_default == 1) {
                item.is_checked = true
                this.form.goods_unit = item.unit
              } else {
                item.is_checked = false
              }
            })
          } else {
            this.goodsForm.unit_data.forEach((item, index) => {
              if (index === 0) {
                item.is_checked = true
                this.form.goods_unit = item.unit
              } else {
                item.is_checked = false
              }
            })
          }
        }
        // 赋值主图
        if (this.goodsForm.goods_image) {
          let image = this.goodsForm.goods_image.startsWith('http')
            ? this.goodsForm.goods_image
            : this.$baseURL + this.goodsForm.goods_image
          this.goodsForm.goods_image = image
        } else {
          this.goodsForm.goods_image = ''
        }
      }
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  },
  watch: {
    value(newVal, oldVal) {
      this.show = newVal
    },
    show(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>

<style lang="less" scoped>
.pop-box {
  // position: relative;
  width: 100vw;
  overflow: hidden;
  // padding-bottom: 100rpx;
  .top {
    width: 694rpx;
    margin: 0 auto;
    padding-top: 20rpx;
    padding-bottom: 36rpx;
    overflow: hidden;

    .image-box {
      overflow: hidden;
      display: flex;
      // justify-content: center;
      align-items: center;
      .left {
        width: 120px;
        height: 120px;
        image {
          width: 120px;
          height: 120px;
        }
      }
      .money {
        display: flex;
        justify-content: center;
        align-items: center;
        view {
          font-size: 36rpx;
          font-weight: 500;
          color: #fe3d23;
        }
      }
    }
  }
  .pop1 {
    border-top: 1px solid #dedede;
    margin: 32rpx auto 0;
    width: 694rpx;

    .pop1-top {
      margin-top: 30rpx;
      font-weight: 500;
      color: #111111;
    }
    .pop1-bottom {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .pop1-item {
        margin-top: 32rpx;
        margin-right: 20rpx;
        padding: 20rpx 20rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        min-width: 96rpx;
        justify-content: center;
        align-items: center;
        border: 1px solid transparent;
      }
      .pop1-checked {
        background: #fff5f4;
        border-color: #fe3d23;
      }
    }
  }
  .pop2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32rpx auto 0;
    width: 694rpx;
    padding: 20rpx 0;
    border-top: 1px solid #dedede;

    .pop2-left {
    }
    .pop2-right {
      display: flex;
      justify-content: center;
      align-items: center;
      .t-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .pop2-number {
        width: 100rpx;
        height: 60rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;
        margin-right: 12rpx;
      }
    }
  }
  .pop3 {
    // position: absolute;
    // bottom: 0;
    // left: 0;
    background-color: #fff;
    // z-index: 9999;
    // width: 100vw;
    height: 140rpx;
    // overflow: hidden;
    view {
      margin: 0 auto;
      margin-top: 20rpx;
      width: 698rpx;
      height: 80rpx;
      background: #fe3d23;
      border-radius: 200rpx;
      font-size: 35rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
